import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import ListItem from "../../components/listItem";
import axios from "axios";
const Detail = () => {
  const [value, setValue] = useState("");
  const [list, setList] = useState<any>([]);
  const navigate = useNavigate();
  const fetchListSearch = async () => {
    const resp = await axios.get("/api/list/search", { params: { value } });
    setList(resp.data.data);
  };
  useEffect(() => {
    fetchListSearch();
  }, [value]);
  return (
    <div>
      <input
        type="text"
        placeholder="请搜搜"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />

      <div className="list">
        {list.map((v: any, i: number) => {
          return (
            <ListItem
              v={v}
              onClick={() => navigate("/detail/" + v.id)}
            ></ListItem>
          );
        })}
      </div>
    </div>
  );
};

export default Detail;
